@import 'styles/settings';
@import 'styles/typography-extends';
@import 'styles/ui.module';

.chartTitle {
  @extend %headline;
  color: $grey-text;
  margin-right: 1rem;
}

.chartTitleContainer {
  margin-bottom: 3rem;
  display: flex;
}

.titleText {
  @extend %title;
  color: $grey-text;
  margin: 0;
}

$chart-width-without-legend: calc(#{$country-scene-chart-width} + 50px);
$scroll-bar-width: 7px;

%tableItem {
  margin-right: 2rem;
  min-width: calc(100vw - #{$sidebar-width} - 100px);
  max-width: calc(100vw - #{$sidebar-width} - 100px);
}

.header {
  width: $chart-width-without-legend;
  padding-right: $scroll-bar-width;
  display: flex;
  align-items: flex-end;
  @extend %tableItem;

  .headerItem {
    width: 19%;
    margin-right: 7px;
    margin-bottom: 10px;
    text-align: left;
    padding: 0;
    align-items: baseline;
    cursor: default;
  }

  .spiHeader {
    width: 4rem;
    margin-right: 0;
  }

  .searchInput {
    width: 25%;
  }
}

.barContainer {
  width: 19%;
  margin-right: 7px;
}

.fullBar {
  width: 100%;
  cursor: default;
}

.bar {
  display: inline-block;
  height: 19px;
}

.spiIndex {
  display: inline-block;
  width: 4rem;
}

.spiCountry {
  width: 25%;
  cursor: pointer;

  
}

.spiCountryButton {
  @extend %title;
  color: $grey-text;
  text-align: left;
  width: 25%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  &:hover {
    color: $white;
  }
}

.spiCountryIndex {
  width: 2.5rem;
  display: inline-block;
}

.spiCountryName {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rankingChartContent {
  @extend %tableItem;
  @extend %verticalScrollbar;

  padding-bottom: 2rem;
  height: calc(100vh - 250px);
  flex-direction: column;
}

.scrollHint {
  position: absolute;
  bottom: 0;
  width: 80%;
  height: 55px;
  padding-left: 15px;
  color: $white;
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(9, 20, 26, 0) 0%, rgba(9, 20, 26, .9) 80%);
  pointer-events: none;
  opacity: 1;

  .arrow {
    transform: rotate(90deg);
    fill: $grey-text;
    margin-right: 1rem;
  }

  &.fade {
    opacity: 0;
  }
}

.row {
  display: flex;
  align-items: flex-end;
}

.found {
  color: $white;
}

.selectedCountry {
  color: $brand-color-main;
  font-weight: bold;
}

.tooltip {
  background-color: $elephant;
  display: flex;
  position: relative;

  .labels {
    flex-direction: column;
    justify-content: center;
    padding: 6px;

    @extend %annotation;
    color: $grey-text;
  }

  .values {
    position: relative;

    .valuesBox {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 50%;
      padding: 5px;
      color: $_temporary-dark-text;
      font-size: $font-size-xs;
    }
  }
}

// Colors

.nonEndemic {
  background-color: $non-endemic-species;
}

.endemic {
  background-color: $endemic-species;
}

.veryHigh {
  background-color: $human-modification-high-color;
}

.totalMinusVeryHigh {
  background-color: $human-modification-color;
}

.protected {
  background-color: $protected-areas;
}

.protectionNeeded {
  background-color: $protection-needed;
}

.protectionNotNeeded {
  background-color: $protection-non-needed-color;
}

.noModification {
  background-color: $non-human-modification;
}